<template>
    <div class="dahezi">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>我的资料</el-breadcrumb-item>
        </el-breadcrumb>

    <div class="hezi">
        <div class="hezi2">
            <div class="hezi3">
                <div class="gerenquyu">
                    <div class="gerenquyu1">
                        <div>
                            <img :src="basicUserInformation.avatar">
                        </div>
                    </div>
                    <div class="avatarright">
                        <!--                    <div class="shang">-->
                        {{basicUserInformation.username}}({{userRole}})<br/>
                        关注({{basicUserInformation.countAttention}}) |粉丝({{basicUserInformation.countFans}})
                        <!--                    </div>-->
                    </div>
                </div>

           <div class="xiangqingxinqi">
               <div class="zuo">
                   <div class="smallbiaoti">
                       基本信息：
                           <el-button
                                   size="mini"
                                   type="text"
                                   icon="el-icon-edit"
                                   @click="handleUpdate()"
                           >修改</el-button>
                   </div>
                   <div class="xiaoxiaohezi">个人介绍:{{basicUserInformation.introduction}}</div>
                   <div class="xiaoxiaohezi">性别:{{basicUserInformation.sex}}</div>
                   <div class="xiaoxiaohezi">手机号:{{basicUserInformation.telephoneNumber}}</div>
                   <div class="xiaoxiaohezi">邮箱:{{basicUserInformation.email}}</div>
                   <div class="xiaoxiaohezi">注册时间:{{basicUserInformation.regTime}}</div>
                   <div class="xiaoxiaohezi">出生年月:{{basicUserInformation.birth}}</div>
               </div>
           </div>
            <div class="xiangqingxinqi">
                <div class="zuo">
                    <div class="smallbiaoti">
                        健康信息：
                        <div v-if="userRole == '糖尿病患者' ">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate2()"
                        >修改</el-button>
                        </div>
                    </div>
                    <div class="xiaoxiaohezi">测评得分:{{yonhujiankang.score}}</div>
                    <div class="xiaoxiaohezi">获病风险:{{yonhujiankang.level}}</div>
                    <div class="xiaoxiaohezi">小提示:{{yonhujiankang.tips}}</div>
                    <div v-if="userRole == '糖尿病患者' ">
                    <div class="xiaoxiaohezi">糖尿病类型:{{yonhujiankang.type}}</div>
                    <div class="xiaoxiaohezi">确诊时间:{{yonhujiankang.timeOfDiagnosis}}</div>
                    </div>
                    <div class="xiaoxiaohezi"><el-button type="primary" @click="dianji">点击测评</el-button>
                    </div>
                </div>
           </div>
            </div>
        </div>
    </div>
<!--        检测对话框-->
        <el-dialog
                title="健康检测"
                align="center"
                :visible.sync="dialogVisible"
                width="70%"
                :before-close="handleClose"
                >
            <div class="dialogDiv">
                    <el-row  v-for="(val,key,index) in jiankangxinxi" :key="index">
                <div class="field">
                    <div class="ziduan">
                        {{key}}:
                    </div>
                    <div class="xuanxian">
                        <el-radio-group  v-for="(v,k,i) in val" :key="i" v-model="scoreg[key]" >
                            <div class="daan">
                            <el-radio  :label="k" >{{k}}</el-radio>
                            </div>
                        </el-radio-group>
                    </div>
                </div>
                    </el-row>


            </div>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dianjiceping">提 交</el-button>
            </span>
        </el-dialog>
        <!-- 添加或修改用户信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="头像" prop="avatar">
                    <el-avatar :src="form.avatar" />
                    <el-row >

                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8888/upload/avatar"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </el-row>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-tag type="info" effect="plain">{{form.account}}</el-tag>
                </el-form-item>
                <el-form-item label="用户角色" prop="role">
                    <el-tag type="info" effect="plain">{{form.role}}</el-tag>
                </el-form-item>
                <el-form-item label="手机号" prop="telephoneNumber">
                    <el-input v-model="form.telephoneNumber" placeholder="请输入手机号" />
                    <!--                        <el-tag type="info" effect="plain">{{form.telephoneNumber}}</el-tag>-->
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱号" />
                    <!--                        <el-tag type="info" effect="plain">{{form.email}}</el-tag>-->
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                        <el-radio label="未知"></el-radio>
                    </el-radio-group>
                    <!--                        <el-tag type="info" effect="plain">{{form.sex}}</el-tag>-->
                </el-form-item>
                <el-form-item label="个人介绍" prop="introduction">
                    <el-input v-model="form.introduction" placeholder="请输入个人介绍" />
                    <!--                        <el-tag type="info" effect="plain">{{form.introduction}}</el-tag>-->
                </el-form-item>
                <el-form-item label="出生年月" prop="birth">
                    <div class="block">
                        <el-date-picker
                                v-model="form.birth"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改健康信息对话框 -->
        <el-dialog :visible.sync="visible" width="600px" append-to-body>
            <el-form ref="formHealthy" :model="formHealthy" :rules="rules" label-width="120px">
                <el-form-item label="测评得分" prop="userName">
                    <el-link>{{formHealthy.score}}</el-link>
                </el-form-item>
                <el-form-item label="风险等级" prop="userName">
                    <el-link>{{formHealthy.level}}</el-link>
                </el-form-item>
                <div v-if="userRole == '糖尿病患者' ">
                    <el-form-item label="糖尿病类型" prop="className">
                    <el-select v-model="formHealthy.type" placeholder="请选择">
                        <el-option
                                v-for="item in leixing"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item label="病情起始时间" prop="time">
                    <el-date-picker clearable size="small" style="width: 200px"
                                    v-model="formHealthy.timeOfDiagnosis"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择发布时间">
                    </el-date-picker>
                </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm2">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        inject:['reload'],
        name: "wodeziliao",
        data(){
            return{
                basicUserInformation:{},
                yonhujiankang:{},
                dialogVisible:false,
                score:0,
                jiankangxinxi:[],
                scoreg:{},
                userRole: null,
                // 表单参数
                form: {
                    userId: null,
                },
                // 表单校验
                rules: {
                },
                // 弹出对话框标题
                title: "",
                // 修改对话框开关控制
                open :false,
                // 表单参数
                formHealthy: {
                    id: null,
                },
                leixing: [{
                    value: '糖尿病一型',
                    label: '糖尿病一型'
                }, {
                    value: '糖尿病二型',
                    label: '糖尿病二型'
                }
                ],
                visible: false,
                fileList: [],
                headers: {
                    Authorization: localStorage.getItem("token")
                },
            }
        },
        created() {
            this.getgerenziliao()
        },
        methods:{
            handleAvatarSuccess(res) {
                //这是为了解决请求异步问题
                setTimeout(() => {
                    this.form.avatar = res.data;

                }, 5000);
                console.log("res====="+res.data);

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            async   getgerenziliao(){
                const {data:jieguo}=await this.$http.get('user/info',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.basicUserInformation=jieguo.data.basicUserInformation
                this.userRole = jieguo.data.userRole
                const {data:res}=await this.$http.get('healthInformation/detail',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
               this.yonhujiankang=res.data
            },
            /** 修改按钮操作 */
            handleUpdate() {
                this.reset();
                this.form = this.basicUserInformation;
                this.open = open;
            },
            handleUpdate2() {
                this.reset();
                this.formHealthy = this.yonhujiankang;
                this.visible = open;
            },
            reset() {
                this.form = {
                    id: null,
                    avatar: null,
                    telephoneNumber: null,
                    email: null,
                    sex: null,
                    introduction: null,
                    role: null,
                    birth: null,
                };
                this.formHealthy = {
                    id: null,
                    score: null,
                    timeOfDiagnosis: null,
                    type: null,
                    userName: null,
                    level: null,

                };
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            // this.form.time = this.form.date1 + " "+this.form.date2;
                            console.log(this.form);
                            console.log(this.form.time);
                            const token = sessionStorage.getItem("token");
                            this.$http.defaults.headers.common['Authorization'] = token;
                            console.log(this.form)
                            this.$http.put('user', this.form).then(response => {
                                if (response.data.code === 200) {
                                    this.$message({showClose: true, message: "修改成功", type: "success"})
                                    this.open = false;
                                    this.getgerenziliao()
                                }
                            });

                        }
                        this.reload();
                    }
                });
            },
            /** 提交按钮 */
            submitForm2() {
                this.$refs["formHealthy"].validate(valid => {
                    if (valid) {
                        if (this.formHealthy.id != null) {
                            const token = sessionStorage.getItem("token");
                            this.$http.defaults.headers.common['Authorization'] = token;
                            console.log(this.form)
                            this.$http.put('healthInformation', this.formHealthy).then(response => {
                                if (response.data.code === 200) {
                                    this.$message({showClose: true, message: "修改成功", type: "success"})
                                    this.visible = false;
                                    this.getgerenziliao()
                                }
                            });
                        }
                    }
                });
            },
            cancel() {
                this.open = false;
                this.reset();
            },
          async  dianji(){
              const token = sessionStorage.getItem("token");
              this.$http.defaults.headers.common['Authorization'] = token;
              const {data: res} = await this.$http.get('healthAssessment/showAll')
                this.jiankangxinxi=res.data
                this.dialogVisible=true


            },
            async dianjiceping(){
                let count = 0
                for(let key in this.scoreg) {
                    count += this.jiankangxinxi[key][this.scoreg[key]]
                }
                //
                // console.log(this.scoreg, '-------scoreg-----')
                // console.log(count, '-------count-----')
                //评测完，发送分数更新请求
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.post( `user/updateHealthAssessmentByUser?score=${count}`
                ).then(response =>{
                    this.$message(response.data.data.tips);
                })
                const {data:res}=await this.$http.get('healthInformation/detail',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.yonhujiankang=res.data
                this.dialogVisible=false
                this.scoreg={}
            }

        }
    }
</script>

<style scoped>
.hezi{

    width: 80%;
    min-height: 900px;
    height: auto!important;
    display: flex;
    justify-content:center;
    align-items:center;
}
    .hezi2{
        width: 100%;
        background-color: white;
        min-height: 850px;
        height: auto!important;
        margin-top: 3px;
    }
    .hezi3{
        width: 100%;
    }
/*.dahezi{*/
/*    padding-top: 3px;*/
/*    background-color: #fffacd;*/
/*    min-height: 1000px;*/
/*    height: auto!important;*/
/*}*/

.gerenquyu{
    height: 180px;
    width: 100%;
    margin-top: 20px;
    display: flex;
}
.gerenquyu1{
    height: 150px;
    width: 150px;
    border: solid 1px #eee;
    padding: 5px;
    /*box-shadow: 0 0 10px #ddd;*/
    background-color: white;
    margin-left: 40%;
}
.avatarright{
    height: 30px;
    width: 120px;
    /*border: solid 1px black;*/
    padding: 5px;
    /*box-shadow: 0 0 10px #ddd;*/
    background-color: white;
    margin-top: 80px;
    color: black;
    font-size: 16px;
}
.gerenquyu img{
    width: 100%;
    height: 100%;
}
.xiangqingxinqi{
    /*display: flex;*/
    width: 90%;
    min-height: 500px;
    padding-right: 100px;
    padding-left: 20px;
    margin-top: 20px;
    background: white;
    height: auto!important;
}
    .zuo{
        width: 90%;
        height: 450px;
        padding-top: 10px;
        margin-left: 100px;
        background: #FFFACD;
    }
    .xiaoxiaohezi{
        margin-left: 50px;
        width: 100%;
        height: 8%;
        line-height: 5em;
        color: black;
        margin-top: 10px;
    }
    .smallbiaoti{
        width: 100%;
        height: 10%;
        font-size: 22px;
        color: black;
    }
.dialogDiv {
    min-height: 700px;
    height: auto!important;
    width: 98%;
    /*background: darkgreen;*/
}
.field{
    min-height: 50px;
    height: auto!important;
    width: 1000px;
    border: beige solid 2px ;
    display:  flex;
    }
    .ziduan{
        margin-top: 5px;
        min-height: 30px;
        height: auto!important;
        width: 120px;
        text-align: center;
    }
    .xuanxian{
        min-height: 30px;
        height: auto!important;
        width: 800px;
        /*border: yellow solid 2px ;*/
        /*display:  flex;*/
    }
    .daan{
        margin-top: 5px;
        width: 250px;
        height: 50px;
        /*border: indianred solid 2px;*/
    }
</style>
